<template>
  <div class="receive-send">
    <el-dialog
      :title="title"
      :visible.sync="send.dialogVisible"
      width="550px"
      @close="close"
      center
    >
      <div class="dialog-content" v-if="isType === 'send'">
        <div class="send-asset">
          <p class="send-label">Asset</p>
          <div class="send-anteque">
            <span class="anteque-left">Anteque (AQ)</span>
            <div class="anteque-right">
              <p>Available : AQ {{send.available}}</p>
              <p>Frozen : AQ {{send.frozen}}</p>
            </div>
          </div>
        </div>
        <div class="send-asset">
          <p class="send-label">To</p>
          <el-input v-model="qrcode">
            <i slot="suffix" class="el-input__icon el-icon-s-grid"></i>
          </el-input>
        </div>
        <div class="send-asset">
          <p class="send-label">Amount</p>
          <el-input class="send-input" v-model="amountAq" @input="amountaqInput">
            <span slot="suffix">AQ</span>
          </el-input>
          <span class="send-equal">=</span>
          <el-input class="send-input" v-model="amountUsd" :disabled="true">
            <span slot="suffix">USD</span>
          </el-input>
        </div>
        <div class="send-asset">
          <p class="send-label">Memo (Optional)</p>
          <el-input v-model="memo"></el-input>
        </div>
        <div class="send-asset">
          <div>
            <span>Transaction Fee :</span>
            <span class="send-cost">{{serviceFee}} AQ</span>
          </div>
          <div>
            <span>Recipient will get :</span>
            <span class="send-cost">{{willGet}} AQ</span>
          </div>
        </div>
        <el-button type="warning" @click="submitClick">SUBMIT</el-button>
      </div>
      <div class="dialog-content" v-else-if="isType === 'pin'">
        <p class="send-pin">Enter Your Wallet Pin</p>
        <el-input v-model="walletPin"></el-input>
        <el-button class="send-confirm" type="warning" @click="confirnClick">CONFIRM</el-button>
      </div>
      <div class="dialog-content" v-else>
        <div class="send-details">
          <i class="el-icon-success"></i>
          <p>Transferred</p>
          <span>{{details.time}}</span>
        </div>
        <el-row>
          <el-col :span="4">
            <div class="details-left">Amount</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">{{amountAq}} AQ</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="details-left">Miner Fee</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">{{serviceFee}} AQ</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="details-left">To</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">
              {{details.to}}
              <i class="el-icon-copy-document" @click="copyAddress(details.to)"></i>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="details-left">From</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">
              {{details.from}}
              <i class="el-icon-copy-document" @click="copyAddress(details.from)"></i>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="details-left">Meno</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">{{details.memo}}</div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <div class="details-left">TxID</div>
          </el-col>
          <el-col :span="20">
            <div class="details-right">
              {{details.txid}}
              <i
                @click="copyAddress(details.txid)"
                class="el-icon-copy-document"
              ></i>
            </div>
          </el-col>
        </el-row>
        <el-button type="warning" @click="send.dialogVisible = false">CONFIRM</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { assetSend, getFee } from '@/api/assets'
export default {
  props: ["send"],
  data() {
    return {
      memo: '',
      qrcode: "",
      amountAq: "",
      amountUsd: "",
      title: "SEND",
      walletPin: "",
      isType: "send",
      serviceFee: '',
      willGet: '',
      detailsData: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.serviceCharge()
    })
  },
  methods: {
    /**
     * @name: 
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    submitClick() {
      if (this.qrcode === '') {
        this.$message({
          message: 'Please enter the address of currency printing.',
          type:'warning'
        })
      } else if (this.amountAq === '') {
        this.$message({
          message: 'Amount cannot be empty.',
          type:'warning'
        })
      } else {
        this.isType = "pin";
        this.title = "ENTER WALLET PIN";
      }
    },
    /**
     * @name: 确认输入提币密码
     * ---------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    confirnClick() {
      if (this.walletPin === '') {
        this.$message({
          message: 'Wallet password cannot be empty.',
          type:'warning'
        })
      } else {
        this.assetSend()
      }
    },
    /**
     * @name: aq-usdt计算
     * ------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    amountaqInput(value) {
      this.amountUsd = (value * this.send.rate * 10) / 10
      this.willGet = value - this.serviceFee
    },
    /**
     * @name: 提币提交
     * ----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async assetSend() {
      let param  = {
        toAddr: this.qrcode,
        fee: parseFloat(this.serviceFee),
        amount: parseFloat(this.amountAq),
        memo: this.memo,
        token_type: 1000,
        wallet_password: this.walletPin
      }
      let { data } = await assetSend(param)
      if (data) {
        this.details = data
        this.isType = "details";
        this.title = "DETAILS";
      }  
    },
    /**
     * @name: 复制内容
     * -----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    copyAddress(value) {
      let oInput = document.createElement('input')
      oInput.value = value
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: 'Replication success',
        type: 'success'
      });
      oInput.remove()
    },
    /**
     * @name: 关闭弹框
     * -------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    close() {
      this.memo = ''
      this.qrcode = ''
      this.amountAq = ''
      this.walletPin = ''
      this.isType = 'send'
      this.title = 'SEND'
    },
    /**
     * @name: 获取手续费
     * -----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async serviceCharge() {
      let { data } = await getFee()
      if (data) {
        this.serviceFee = data
      }
    }
  }
};
</script>
<style lang="less">
.receive-send {
  .el-dialog__header {
    font-size: 28px;
    font-weight: 600;
    padding-bottom: 35px;
    background: #f7f8f9;
    border-bottom: 2px solid #ffaf46;
  }
  .dialog-content {
    .send-asset {
      margin-bottom: 20px;
    }
    .send-label {
      font-size: 16px;
      padding-bottom: 7px;
      color: #b6bccc;
    }
    .send-cost {
      color: #02082b;
      font-size: 15px;
      padding-left: 10px;
    }
    .send-pin {
      font-size: 18px;
      color: #02082b;
      padding-bottom: 20px;
    }   
    .send-equal {
      padding: 0 10px;
    }
    .send-input {
      width: 234px;
      span {
        line-height: 40px;
      }
    }
    .send-anteque {
      border: 1px solid #cbcdcf;
      background: #ffffff;
      border-radius: 5px;
      padding: 10px;
      height: 60px;
      .anteque-left {
        font-size: 15px;
        color: #02082b;
      }
      .anteque-right {
        display: inline-block;
        float: right;
      }
    }
    .el-row {
      font-size: 16px;
      height: 40px;
      .details-left {
        color: #b3b4c2;
      }
      .details-right {
        color: #02082b;
        i {
          cursor: pointer;
        }
      }
    }
    .el-button {
      margin-top: 50px;
      width: 100%;
    }
    .send-confirm {
      margin-top: 160px;
    }
    .send-details {
      width: 260px;
      margin: 20px auto;
      text-align: center;
      border-bottom: 1px solid #e8e8e7;
      i {
        font-size: 30px;
        color: #70C074;
      }
      p {
        color: #02082b;
        font-size: 16px;
      }
      span {
        padding-top: 5px;
        padding-bottom: 25px;
        display: inline-block;
      }
    }
  }
}
</style>